<!-- 抽奖排行 -->
<template>
	<view>
		<view class="head">
			<view class="head_t">
				<text class="head_txt">我的排行</text>
				<text v-if="info.rank==0||info.rank>100">暂未上榜</text>
				<text v-else="info.rank==0||info.rank>100">{{info.rank}}</text>
			</view>
			<view class="head_txt">
				<text>我的签数：{{info.total}}</text>
			</view>
		</view>
		<view class="main">
			<view class="main_box" v-for="(item,index) in list" :key="index">
				<view class="main_box_l">
					<image class="rank_img" v-if="index==0" src="@/static/blindbox/jackpot/first.png" mode=""></image>
					<image class="rank_img" v-else-if="index==1" src="@/static/blindbox/jackpot/second.png" mode="">
					</image>
					<image class="rank_img" v-else-if="index==2" src="@/static/blindbox/jackpot/third.png" mode="">
					</image>
					<text class="rank_num" v-else>{{index+1}}</text>
					<image class="avatar" :src="item.avatar==''?'/static/blindbox/avant_null.png':item.avatar" mode="aspectFill"></image>
					<text class="phone">{{item.customerName}}</text>
				</view>
				<view class="main_box_r">
					总签数:{{item.totalNum}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityId: '', //活动id
				list: [],
				info:{},
				pageNumber: 1,//当前页数
				pageSize: 10,//分页大小
				listTotal: 0,//列表总数
			}
		},
		onLoad() {
			this.getList()
			this.getMyRanking()
		},
		methods: {
			async getMyRanking() { //获取我的排名信息
				uni.showLoading()
				let data = {
					activityId: this.activityId,
				}
				const res = await this.$api.myRanking(data);
				uni.hideLoading()
				this.info = res.result;
			},
			async getList() { //获取排名列表
				let data = {
					activityId: this.activityId,
					pageNum:this.pageNumber,
					pageSize:this.pageSize,
				}
				const res = await this.$api.luckDrawRankList(data);
				this.list = res.result;
				// this.listTotal = res.result.total
				// if (this.pageNumber > 1) {
				// 	this.list = this.list.concat(res.result.records); //将数据拼接在一起
				// } else {
				// 	this.list = res.result.records
				// }
			}
		},
		//页面上拉触底事件的处理函数
		// onReachBottom: function() {
		// 	console.log("触底了", this.pageNumber, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
		// 	if (this.pageNumber >= Math.ceil(this.listTotal / this.pageSize)) {
		// 		console.log('没有分页')
		// 		// this.lodingtype = 1
		// 	} else {
		// 		// this.lodingtype = 0
		// 		this.pageNumber++; //每触底一次 page + 1;
		// 		this.getList();
		// 	}
		// },
		
	}
</script>

<style>
	view {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		height: 250rpx;
		background: linear-gradient(180deg, #069AFC 0%, #55D2CD 93.62%);
		padding: 50rpx;
	}

	.head_t {
		color: #fff;
		font-size: 44rpx;
		margin-bottom: 8rpx;
		/* font-weight: bold; */
	}

	.head_txt {
		font-size: 30rpx;
		color: #FFFFFF;
		margin-right: 22rpx;
	}

	.main {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -50rpx;
		padding-bottom: 100rpx;
	}

	.main_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 26rpx 0rpx;
		margin: 0 40rpx;
		border-bottom: 2rpx solid #E1E1E1;
	}

	.rank_img {
		width: 39rpx;
		height: 46rpx;
	}

	.main_box_l {
		display: flex;
		align-items: center;
	}

	.rank_num {
		font-size: 30rpx;
		color: #222222;
		/* font-weight: 600; */
		width: 39rpx;
		height: 46rpx;
		text-align: center;
		line-height: 46rpx;
	}

	.phone {
		font-size: 32rpx;
		color: #222222;
		/* font-weight: 600; */
	}

	.avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin: 0 24rpx;
	}

	.main_box_r {
		font-size: 30rpx;
		color: #222222;
	}
</style>
